<template>
  <div class="login-container" >
    <div class="content">
     <h2 >后台管理系统</h2>
      <div class="login-wrapper" v-loading="loading">
        <el-form  label-width="80px" :model="loginInfo">
          <el-form-item label="用户名">
            <el-input v-model="loginInfo.email"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="loginInfo.password"></el-input>
          </el-form-item>
          <el-form-item class="btn" style="margin-left: 0">
            <el-button type="primary" @click="submitForm()">登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>
import {Login} from "../api/login";
export default {
  name: "Login",
  data(){
    return{
      loginInfo:{
        email:'super@a.com',
        password:'123123'
      },
      loading:false
    }
  },
  methods:{
    async submitForm(){
      this.loading = true
      const res =  await Login(this.loginInfo)
      if(res && res.status === 200){
        console.log(res);
        this.loading = false
        this.$message.success('登录成功')
        window.localStorage.setItem('token',res.data.access_token)
        await this.$store.dispatch('getUserInfo')
        await this.$router.push({path: '/home/'})
      }else {
        this.$message.error('登录失败')
      }
    }
  }
}
</script>

<style scoped lang="css">
.login-container{
  height: 100%;
  width: 100%;
  background-image: url("../assets/banner.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.content{
  width: 480px;
  height: 400px;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0px 0px 15px #545454;
}
h2{
  margin-top: 28px;
  color: #0091e6;
  height: 10%;
  text-align: center;

}
.login-wrapper{
  /*width: 100%*/
  /*height: 90%;*/
  padding:20px;
}
.form{
  width: 100%;
  height: 60%;
}





</style>